<template>
  <div class="login-index">
    <van-nav-bar title="登录" left-text="返回" left-arrow @click-left="$router.go(-1)" />
    <div class="mt-20">
      <!-- 手机号码 -->
      <div class="handset flex jc-sb pb-5">
        <input class="f14" type="text" v-model="phone" placeholder="请输入手机号" click-left="$router.go(-1)" />
        <input class="f12 bg-fff" type="button" value="获取验证码" @click="getCode" />
      </div>
      <!-- 验证码 -->
      <div class="handset flex jc-sb mt-20 pb-5">
        <input v-model="smsCode" class="f14" placeholder="请输入验证码" />
      </div>
  
      <!-- 登录 -->
      <div class="mt-30">
        <van-button style="width: 80%" type="danger" @click="login">短信登录</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import request from '../../utils/request'
export default {
  data() {
    return {
      phone: '13800000001',
      smsCode: ''
    }
  },

  methods: {
    getCode() {
      let params = {
        phone: this.phone
      }
      request.get('/user/getSmsCode', { params }).then(res => {
        this.smsCode = res.smsCode;
      })
    },

    login(){
      let data = {
        phone: this.phone,
        smsCode: this.smsCode
      }
      request.post('/user/login',data).then(res=> {  
        // 将phone和token存入vuex
        this.$store.commit('set_phone',this.phone);
        this.$store.commit('set_token',res.result.token);
        this.$router.push('/my')
      });
    }
  }
}

</script>
 

<style lang="less">
@import "./index.less";
</style>

